<template>
<div class="box">
  <div style="display: flex;flex-direction: column;align-items: flex-start">
    <div class="op_menu">
      <el-input  v-model="selectInfo" style="width: 120px;" />
      <el-button @click="searchLog(1)" type="primary" style="margin:0 10px 0 10px">查询ip</el-button>
      <el-date-picker
          v-model="dates"
          type="daterange"
          range-separator="To"
          start-placeholder="Start date"
          value-format="YYYY-MM-DD"
          end-placeholder="End date"/>
      <el-button @click="searchLog(2)" type="primary" style="margin-left: 10px">查询时间</el-button>
    </div>
    <div>
      <el-button @click="openDialog(1)" type="primary">编辑</el-button>
      <el-button @click="openDialog(2)" type="success">添加</el-button>
      <el-button @click="deleteLog" type="danger">删除</el-button>
    </div>
  </div>
  <el-table
      ref="multipleTable"
      :data="tableData"
      highlight-current-row
      @current-change="selectLog"
      style="width: 100%">
<!--      @selection-change="handleSelectionChange"-->
    <el-table-column type="index" width="55" />
    <el-table-column label="日期" align="center">
      <template #default="scope">{{ scope.row.opDate }}</template>
    </el-table-column>
    <el-table-column property="userId" label="用户ID"  align="center"/>
    <el-table-column property="ipAddress" label="IP地址"  show-overflow-tooltip align="center"/>
    <el-table-column property="opMethods"  label="操作名称" align="center"/>
  </el-table>
  <el-dialog
      v-model="isDialog"
      :title="dialogTitle"
      width="800px"
  >
    <div class="dialog-box">
      <el-form
          :model="Logs"
          :inline="true"
          label-width="auto"
          label-position="right"
          size="small"
      >
        <el-form-item label="时间">
          <el-date-picker v-model="Logs.opDate" value-format="YYYY-MM-DD" type="date"/>
        </el-form-item>
        <el-form-item label="用户id">
          <el-input v-model="Logs.userId"/>
        </el-form-item>
        <el-form-item label="ip地址">
          <el-input v-model="Logs.ipAddress"/>
        </el-form-item>
        <el-form-item label="操作名称">
          <el-input v-model="Logs.opMethods"/>
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancelOp">取消</el-button>
        <el-button type="primary" @click="onsubmit()"
        >提交</el-button
        >
      </span>
    </template>
  </el-dialog>
</div>
</template>

<script>
import {GetLog, SearchLog} from "@/http/api";
import {AddLog, DeleteLog, EditLog, SearchLogByTime} from "../http/api";

export default {
  name: "log",
  data(){
    return{
      isDialog:false,
      dialogTitle:'',
      diaLogA:false,
      dialogE:false,
      selectInfo:'',
      tableData:[
        {
          userId:1234,
          ipAddress:'10.23.44.55',
          opMethods:'input',
          opDate:"2021-10-25",
          logId:0
        },
        {
          userId:123444,
          ipAddress:'10.23.44.55',
          opMethods:'input',
          opDate:"2021-10-25",
          logId:1
        }
      ],
      dates:'',
      LogInfo:{
        userId:'',
        ipAddress:'',
        opMethods:'',
        opDate:"",
        logId:''
      },
      // editLog:[],
      selection:{},
    }
  },
  mounted() {
    this.getLog();
  },
  computed:{
    Logs(){
      if (this.diaLogA === true) return this.LogInfo;
      else {
        return this.selection
      }
    }
  },
  methods:{
    deleteLog(){
      DeleteLog(this.selection.logId).then(res=>{
        let data = res.data;
        console.log(data)
        if (data.code===200) this.getLog()
      })
    },
    onsubmit(){
      //添加数据
      if (this.diaLogA ===true){
        let logList = [this.LogInfo]
        AddLog(logList).then(res=>{
          const data = res.data.data;
          console.log(data)
          this.LogInfo = [{
            userId:'',
            ipAddress:'',
            opMethods:'',
            opDate:"",
            logId:''
          }]
          this.cancelOp()
          this.getLog()
        })
      }else {
        let logList = [this.selection]
        EditLog(logList).then(res=>{
          const data = res.data;
          if (data.code===200){
            console.log("yes")
            this.cancelOp()
            this.getLog()
          }
        })
      }
    },
    openDialog(val){
      if (val===1) {
        this.dialogE = true
        this.dialogTitle = '编辑数据'
      }
      else if (val === 2) {
        this.diaLogA =true
        this.dialogTitle = '添加数据'
      }
      this.isDialog = true
    },
    cancelOp(){
      this.diaLogA=false
      this.dialogE=false
      this.isDialog=false
    },
    getLog(){
      GetLog().then(res=>{
        const data = res.data.data;
        this.tableData = data;
      })
    },
    searchLog(val){
      if (this.selectInfo!=''&&val===1){
        let params ={
          ip:this.selectInfo
        }
        SearchLog(params).then(res=>{
          const data = res.data.data;
          this.tableData = data;
        })
      }else if (val===2){
        let S=this.dates[0];
        let E=this.dates[1];
        const params={
          S:S,
          E:E,
        }
        SearchLogByTime(params).then(res=>{
          let data = res.data;
          if (data.code === 200){
            this.tableData = data.data;
          }
        })
      } else {
        this.getLog();
      }
    },
    selectLog(val){
      this.selection = val;
    }
  }
}
</script>

<style scoped>
.box{
  width: calc(100% - 40px);
  margin: 20px;
}
.op_menu{
  flex: 1;
  margin: 20px 0;
}
.el-form-item{
  width: 40%;
}
.el-input{
  width: 220px;
}
.el-form{
  border: lightgray 1px solid;
  border-radius: 10px;
  padding: 10px 0 0 0;
  margin: 5px auto;
}
.dialog-box{
  max-height: 40vh;
  /*overflow-y: scroll;*/
}
</style>